<template>
	<!-- 头条快报 -->
	<view class="diy-special dis-flex flex-y-center">
		<!-- 图片 -->
		<form @submit="_onTargetIndex" report-submit="true">
			<button form-type="submit" class="btn-normal dis-flex">
				<view class="special-left">
					<image mode="widthFix" :src="itemStyle.image"></image>
				</view>
			</button>
		</form>
		<!-- 资讯轮播 -->
		<swiper class="special-content flex-box" :class="['display_'+itemStyle.display]" autoplay="true" interval="2200"
		 duration="800" circular="true" vertical="true" :display-multiple-items="itemStyle.display">
			<swiper-item v-for="item in dataList" :key="item.article_id">
				<form @submit="_onTargetDetail" report-submit="true" :data-id="item.article_id">
					<button form-type="submit" class="btn-normal dis-flex" >
						<view class="content-item onelist-hidden">
							<text>{{ item.article_title }}</text>
						</view>
					</button>
				</form>
			</swiper-item>
		</swiper>
		<!-- 更多资讯 -->
		<form @submit="_onTargetIndex" report-submit="true">
			<button form-type="submit" class="btn-normal dis-flex">
				<view class="special-more">
					<i class="iconfont icon-xiangyoujiantou"></i>
				</view>
			</button>
		</form>
	</view>
</template>

<script>
	export default {
		computed: {
			paddingTop() {
				return uni.upx2px(this.itemStyle.paddingTop * 2) + 'px';
			}
		},
		props: {
			itemStyle: {},
			params: {},
			dataList: {}
		},
		methods: {
			/**
			 * 跳转文章详情页
			 */
			_onTargetDetail(e) {
				this.navigationTo({
					url: '/pages/article/detail/detail?article_id=' + e.currentTarget.dataset.id
				});
			},
			/**
			 * 跳转文章首页
			 */
			_onTargetIndex(e) {
				// 记录formid
				this.saveFormId(e.detail.formId);
				this.navigationTo({
					url: '/pages/article/index'
				});
			},
			
		}
	}
</script>

<style>
	/* common.wxss */
	@import url("../../utils/common.scss");

	/* 头条快报 */

	.diy-special .special-left {
		padding: 10upx 20upx;
	}

	.diy-special .special-left image {
		display: block;
		width: 140upx;
	}

	.diy-special .special-content {
		/* width: 500upx; */
		overflow: hidden;
	}

	.diy-special .special-content .content-item {
		padding: 4upx 0;
		font-size: 26upx;
		color: #141414;
		/* height: auto; */
	}

	.diy-special .special-content.display_1 {
		height: 44upx;
	}

	.diy-special .special-content.display_2 {
		height: 88upx;
	}

	.diy-special .special-more {
		padding: 24upx 20upx;
		font-size: 24upx;
	}
</style>
